import { useEffect, useState } from "react";
import { NavBar, Icon, List, Toast } from "antd-mobile";
import { reqGetCountryData } from "../../api/common";

import "./index.less";

const Item = List.Item;

export default function CountryPicker(props) {
  const { history } = props;
  // 定义状态
  const [countryData, setCountryData] = useState({});

  // 生命周期函数 componentDidMount
  useEffect(() => {
    async function getCountryData() {
      try {
        // 放置可能出错的代码
        // 如果没有出错，就只会执行try里面的代码，
        // 一旦出错，就不会执行try的代码啦，回来到catch
        // 请求成功
        const res = await reqGetCountryData();
        // console.log(res.data.data);
        setCountryData(res.data.data);
      } catch (error) {
        // 请求失败
        // error就是失败的原因
        console.log(error);
        // 错误提示
        Toast.fail("请求失败了，请刷新试试～", 2);
      }
    }
    getCountryData();
  }, []);

  const goBack = (value) => {
    return () => {
      // push方法的第二个参数，就是路由穿参：state参数
      history.push("/register/phone", value);
    };
  };

  // 跳转到对应城市去
  // const goCountry = (key) => {
  //   return () => {
  //     // key点击的是哪个元素
  //     // 求元素距离顶部的距离 document.getElementById(key).offsetTop
  //     window.scrollTo(0, document.getElementById(key).offsetTop - 45);
  //   };
  // };

  // 使用事件委托进行优化：减少绑定事件次数
  const goCountry = (event) => {
    window.scrollTo(
      0,
      document.getElementById(event.target.textContent).offsetTop - 45
    );
  };

  // countryData
  // 提取对象上所有属性名成为数组并返回
  const countryDataKeys = Object.keys(countryData);

  return (
    <div>
      <NavBar
        className="country-picker-navbar"
        mode="light"
        icon={<Icon type="left" className="icon-left" />}
        onLeftClick={() => history.goBack()}>
        选择国家或者地区
      </NavBar>
      <div className="country-picker-wrapper">
        {countryDataKeys.map((countryKey) => {
          const countryValue = countryData[countryKey];

          return (
            <List
              id={countryKey}
              renderHeader={() => countryKey}
              key={countryKey}>
              {countryValue.map((country) => {
                // country是一个对象 { "中国": "86" }
                // key --> 中国
                const key = Object.keys(country)[0];
                // value --> 86
                const value = country[key];

                return (
                  <Item
                    onClick={goBack(value)}
                    className="country-picker-item"
                    extra={"+" + value}
                    key={key}>
                    {key}
                  </Item>
                );
              })}
            </List>
          );
        })}
      </div>

      <ul className="country-picker-sidebar" onClick={goCountry}>
        {countryDataKeys.map((key) => {
          // 默认事件回调函数只能接受event参数
          // 通过使用高阶函数（执行函数返回函数）传递其他参数
          return <li key={key}>{key}</li>;
        })}
      </ul>
    </div>
  );
}
